<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in" ref="dialogBox">
      <div class="cornerComment-in-title">
        <span>电脑均衡分班</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
<!--        <iframe ref="iframeExcel" :src="$studentExcel" frameborder="0" class="iframeShow"></iframe>-->
        <studentExcelIframe ref="studentiframe" @changeData="getFileFn"></studentExcelIframe>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click="closePOpup" size="small">关闭</el-button>
        <el-button @click="rechFn" size="small">清空刷新</el-button>
        <el-button @click="verificationFrom" size="small" plain type="primary">确定并分班</el-button>
      </div>
    </div>
    <studentComputer :visible.sync="detailVisible" :studentInfo="studentInfo"></studentComputer>
  </div>
</template>

<script>
import studentComputer from "../studentComputer";
import studentExcelIframe from "./studentExcelIframe";
export default {
  props: ['visible'], // commoent 学生点评 collection 学生采集
  components: {studentComputer, studentExcelIframe},
  data() {
    return {
      detailVisible: false,
      dialogVisible: false,
      iframeWin: '',
      studentInfo: []
    }
  },
  watch: {
    visible() {
      let n =this
      this.dialogVisible = this.visible
      if(this.visible){
        // this.$nextTick(function () {
        //   // window.addEventListener('message', n.getFileFn);
        //   window.onmessage = n.getFileFn
        //   n.iframeWin = n.$refs.iframeExcel.contentWindow;
        // })
      }
    }
  },
  created() {
    // let n =this
    // this.$nextTick(function () {
    //   window.addEventListener('message', n.getFileFn);
    //   n.iframeWin = n.$refs.iframeExcel.contentWindow;
    // })
  },
  methods: {
    rechFn(){
      // document.querySelector('iframe').contentWindow.location.reload();
      this.$refs.studentiframe.clearfn()
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    // 提交内容
    verificationFrom() {
      this.$refs.studentiframe.sendData()
    },
    getFileFn(data) {
      // let {data} = event.data
      console.log('data:', data)
      if(data){
        this.studentInfo = JSON.parse(JSON.stringify(data))
        this.detailVisible = true
      }
    },
    removeFileFn() {
      this.fileList = [];
      this.downLoadFile = '';
      this.file = '';
    },
    handleRemove(file, fileList) {
      console.log('移除', file, fileList)
      this.file = ''
    },
    handleSuccess(response) {
      this.editForm.file = response.data.name
      // 上传成功后传入后台
      this.uploadFileFn(response.data.name)
    },
    // 初始化
    async uploadFileFn(option) {
      let data = await this.$fetch(this.api.common.division, {file: option, number: this.classNumber});
      if (!data.code) {
        this.file = data.file
      } else {
        this.$message.error(data.msg)
      }
    },
    beforeAvatarUpload(file) {
      // console.log('提交之前：', file)
      // if(!this.classNumber){
      //   this.$message.error('填写分班的数量')
      // }
      // return !this.classNumber
      // const isLt2M = file.size / 1024 / 1024 < 2
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!')
      // }
      // return isLt2M
    },
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 95%;
  height: 90%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}
.iframeShow{
  width:100%;
  height: 100%;
}
</style>


